<template>
  <div username="setUserList">
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <h1 class="con-right-title">
          <i class="fa fa-reply" @click="cancel"></i>
          角色管理/分配用户
        </h1>
        <!--上部搜索条件-->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮 -->
        <div class="table-conBtn">
          <el-button type="warning" icon="el-icon-plus" @click="handlesetUser">
            分配用户
          </el-button>
          <el-button type="warning" plain @click="edtiRoles">
            批量取消授权
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!--下部table-->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            label="登录名称"
            prop="loginName"
            show-overflow-tooltip
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="用户名称"
            prop="userName"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="邮箱"
            prop="email"
            min-width="200"
          ></el-table-column>
          <el-table-column
            label="手机"
            prop="phonenumber"
            min-width="150"
          ></el-table-column>
          <el-table-column label="用户状态" prop="status" min-width="150">
            <template>
              <span class="tag-span primary">成功</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            min-width="160"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="changeComponent(scope.row.userId)">
                取消授权
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!-- 分配用户dialog -->
        <SetUser
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
          @refresh="refresh"
        ></SetUser>
      </div>
    </div>
  </div>
</template>

<script>
import { setUserList, batchCanAuthor } from '@/api/system/roles' // 接口
import topSearch from '@component/system/roles/setUser/topSearch' // 上部搜索条件
import SetUser from '@component/system/roles/setUser/addSetUser'
export default {
  name: 'SetUserList',
  msg: '角色管理/分配用户-列表页',
  components: {
    topSearch,
    SetUser
  },
  data() {
    return {
      loading: true,
      total: 0,
      deldisabled: true, // 批量删除按钮禁用状态
      tableData: [], // table内容
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: null // 编辑时，传递的参数
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        loginName: '',
        phonenumber: ''
      },
      multipleSelection: []
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.formInline.roleId = this.$route.params.id
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取列表 */
    async searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      // let params = this.changeToForm(obj)
      await setUserList(
        this.formInline.roleId,
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response,
            type: 'warning'
          })
        }
      )
    },
    // 返回按钮
    cancel() {
      // this.$router.go(-1)
      let query = {
        mId: this.$route.query.mId
      }
      this.$router.push({ name: 'rolesList', query: query })
    },
    // 分配用户
    handlesetUser() {
      this.dialogData.isShow = true
      this.dialogData.params = this.formInline.roleId
    },
    // 批量取消授权
    edtiRoles() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条权限！')
        return
      }
      this.$confirm(
        `确认取消选中的这${this.multipleSelection.length}条权限吗？`,
        '取消提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let userIds = []
        this.multipleSelection.forEach((item) => {
          userIds.push(item.userId)
        })
        this.delItem(userIds)
      })
    },
    /* 批量取消授权 */
    async delItem(userIds) {
      let obj = { userIds: userIds.join(',') }
      await batchCanAuthor(this.formInline.roleId, obj, (response) => {
        this.searchList()
      })
    },
    /* 取消单个授权 */
    changeComponent(userId) {
      this.$confirm('确认要取消该用户角色吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem([userId])
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 改变状态 */
    changeStatus(status, username) {},
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.deldisabled = false
      if (this.multipleSelection.length === 1) {
        this.editdisabled = false
      }
      if (this.multipleSelection.length === 0) {
        this.deldisabled = true
        this.editdisabled = true
      }
    },
    /* 换页 */
    changePage(page) {
      this.formInline.pageNum = page
      this.searchList()
    },
    /* 分配用户后，刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
#rolesManage {
  height: 100%;

  .search-box {
    padding-left: 30px !important;
  }

  .bottom-box {
    position: relative;
    height: calc(~'100% - 40px');

    .table-conBtn {
      padding-left: 30px !important;
    }
    .left-tree {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      /*  background: #8cc5ff;*/
      width: 192px;
      height: calc(~'100% - 20px');
      overflow: hidden;

      &.hide-tree {
        width: 12px;
      }

      span.btn-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        width: 12px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #ddd;
        cursor: pointer;

        &:hover {
          background: #ff8c00;
        }
      }
    }
    .table {
      &.hide-tree {
        margin-left: calc(~'12px + 20px');
      }
    }
  }
}
</style>
